body {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #c6426e, #642b73);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  perspective: 1500px;

  .stage {
    width: 500px;
    height: 350px;
    background-color: white;
    padding: 30px;
    border-radius: 20px;
    transform-style: preserve-3d;
    // transform: rotateX(45deg) rotateY(45deg);
    transform: rotateX(0deg) rotateY(0deg);

    h5 {
      transform: translateZ(20px);
    }
    h3 {
      transform: translateZ(30px);
    }
    .list {
      display: flex;
      justify-content: space-between;
      transform: translateZ(20px);

      .card {
        width: 160px;
        height: 240px;
        background-color: lightblue;
        // background-position: -79px -105px;
        background-size: 184px 260px;
        background-position: -12px -10px;

        background-repeat: no-repeat;
        border-radius: 20px;

        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;

        img {
          height: 80%;
        }
        &:nth-child(1) {
          background-image: url("./3dr_monobg.jpg");
          //   background-position-x: 10px;
          img {
            // transform: translateY(10px);
            position: relative;
            bottom: -20px;
            height: 90%;
          }
        }
        &:nth-child(2) {
          background-image: url("./3dr_spirited.jpg");
          img {
            // transform: translateY(11px);
            position: relative;
            bottom: -10px;
          }
        }
        &:nth-child(3) {
          background-image: url("./3dr_howlbg.jpg");
          img {
            // transform: translateY(11px);
          }
        }
      }
    }
  }
}
